<template>
    <div class="app-container">
        <div class="customContainer ">
            <!-- 搜索头 -->
            <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
                <el-form-item>
                    <el-checkbox true-label="1" false-label="0" v-model="formInline.look_del" @change="lookDelChange"
                        border>
                        查看已删门店
                    </el-checkbox>
                </el-form-item>
                <el-form-item>
                    <el-date-picker :clearable="false" v-model="pickerDate" value-format="yyyy.MM.dd" type="daterange"
                        align="right" unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                        :picker-options="pickerOptions"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-select filterable placeholder="选择门店" v-model="formInline.store_id">
                        <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="formInline.name" placeholder="请输入礼品编号/礼品名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <dj-button size="small" @search="searchClick" />
                </el-form-item>
            </el-form>
            <!-- 权限tap标签分类 -->
            <el-tabs v-model="formInline.type" @tab-click="handleClick">
                <el-tab-pane label="礼品配置" name="1"></el-tab-pane>
                <el-tab-pane label="换货" name="2"></el-tab-pane>
                <el-tab-pane label="采购/退货" name="3"></el-tab-pane>
                <el-tab-pane label="店内调拨" name="4"></el-tab-pane>
                <el-tab-pane label="店外调拨" name="5"></el-tab-pane>
            </el-tabs>
            <!-- 表格 -->
            <transition name="fade" mode="out-in">
                <el-table highlight-current-row :data="list" v-loading.body="listLoading" border size="small"
                    :key="formInline.type">
                    <el-table-column align="center" prop="time" label="时间"></el-table-column>
                    <el-table-column align="center" prop="store_name" label="所属门店"></el-table-column>
                    <el-table-column v-if="formInline.type==1||formInline.type==2" align="center" label="所属机台">
                        <template slot-scope="scope">
                            {{scope.row.area_name+'-'+scope.row.no}}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="no_obsolete" label="神采礼品编号"></el-table-column>
                    <el-table-column v-if="formInline.type==2" align="center" prop="old_gift_name" label="换出礼品名称">
                    </el-table-column>
                    <el-table-column v-if="formInline.type==2" align="center" prop="take_num" label="换出数量">
                    </el-table-column>
                    <el-table-column v-if="formInline.type==2" align="center" prop="new_gift_name" label="换入礼品名称">
                        <template slot-scope="scope">
                            {{scope.row.new_gift_name?scope.row.new_gift_name:'-'}}
                        </template>
                    </el-table-column>
                    <el-table-column v-if="formInline.type==2" align="center" prop="give_num" label="换入数量">
                    </el-table-column>
                    <el-table-column v-if="formInline.type!=2" align="center" prop="gift_name" label="礼品名称">
                    </el-table-column>
                    <el-table-column v-if="formInline.type==4" align="center" prop="house_out" label="转出仓">
                    </el-table-column>
                    <el-table-column v-if="formInline.type==4" align="center" prop="house_in" label="转入仓">
                    </el-table-column>
                    <el-table-column v-if="formInline.type==5" align="center" prop="store_out" label="转出门店">
                    </el-table-column>
                    <el-table-column v-if="formInline.type==5" align="center" prop="store_in" label="转入门店">
                    </el-table-column>
                    <el-table-column v-if="formInline.type==1 || formInline.type==3" align="center" label="入出类型">
                        <template slot-scope="scope">
                            <span v-if="formInline.type==1">
                                {{scope.row.is_change==0&&scope.row.replenishment_type==1?'补货':scope.row.is_change==0&&scope.row.replenishment_type==2?'拿出':scope.row.is_change==1?'换货'
                                : scope.row.is_change==2?'新增':'移除'}}
                            </span>
                            <span v-if="formInline.type==3">{{scope.row.status*1 >=9?'退货':'采购入库'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="formInline.type!=2" align="center" prop="order_num" label="数量">
                        <template slot-scope="scope">
                            <span v-if="formInline.type==1">{{scope.row.replenishment_num}}</span>
                            <span v-else-if="formInline.type==3">
                                <span>{{scope.row.arrive_num}}</span>
                                <!-- <span v-if="scope.row.status<9">
                                    {{scope.row.arrive_num>0?scope.row.arrive_num:scope.row.purchase_num>0?scope.row.purchase_num:scope.row.verify_num>0?scope.row.verify_num:scope.row.total_num>0?scope.row.total_num:scope.row.order_num}}
                                </span>
                                <span v-else>
                                    {{scope.row.arrive_num>0?scope.row.arrive_num:scope.row.order_num}}
                                </span> -->
                            </span>
                            <span v-else>
                                {{scope.row.arrive_num>0?scope.row.arrive_num:scope.row.out_num>0?scope.row.out_num:scope.row.verify_num>0?scope.row.verify_num:scope.row.order_num}}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="nick" label="操作人"></el-table-column>
                </el-table>
            </transition>
        </div>
    </div>
</template>
<script>
    import {
        getList,
        getPage,
        getStoreList,
    } from "@/api/storage_control/giftInOut_form";
    import { pickerOptionsF, pickerDateF, optionMaxTime } from '@/utils';
    export default {
        data() {
            return {
                list: [],
                listLoading: false,
                storeList: null,
                url: '/Store_circulation_detail/gift_config',
                formInline: {
                    store_id: '',
                    begin_time: '',
                    end_time: '',
                    name: '',
                    type: '1',
                    look_del:'0'
                },
                pickerOptions: pickerOptionsF(),
                pickerDate: pickerDateF()
            }
        },
        beforeRouteEnter(to, from, next) {
            next((vm) => {//当进入组件之前，执行 beforRouteEnter 路由钩子函数 ,//参数vm就是当前组件的实例。
                if (!vm.storeList) {
                    vm.getStore();
                }
            })
        },
        methods: {
            lookDelChange() {
                this.getStore();
            },
            getStore() {
                getStoreList({ look_del: this.formInline.look_del, category_id: 280 }).then(response => {
                    this.storeList = response;
                    let data = response.filter(res => 
                        res.id == this.$store.getters.optionId
                    )
                    if(data.length>0){
                        this.formInline.store_id = data[0].id;
                    } else {
                        if(this.storeList.length > 0) {
                            this.formInline.store_id = this.storeList[0].id;
                        }
                    }
                });
            },
            // tab切换搜索
            handleClick(tab, event) {
                switch (this.formInline.type) {
                    case '1':
                        this.url = '/Store_circulation_detail/gift_config';
                        break;
                    case '2':
                        this.url = '/Store_circulation_detail/gift_change';
                        break;
                    case '3':
                        this.url = '/Store_circulation_detail/gift_procurement_return';
                        break;
                    case '4':
                        this.url = '/Store_circulation_detail/gift_transfer_in';
                        break;
                    case '5':
                        this.url = '/Store_circulation_detail/gift_transfer_out';
                        break;
                }
                this.searchClick();
            },
            // 搜索
            searchClick() {
                if (this.formInline.name == '') {
                    this.$message({ type: 'error', message: '请先输入礼品编号 / 礼品名称再进行查询哦' })
                    this.list = [];
                    return;
                }
                optionMaxTime(this.pickerDate).then(() => {//最大可选择时间区间
                    this.formInline.begin_time = this.pickerDate ? this.pickerDate[0] : '';
                    this.formInline.end_time = this.pickerDate ? this.pickerDate[1] : '';
                    this.fetchData();
                });
            },
            // 列表获取
            fetchData() {
                this.listLoading = true;
                getList(this.formInline, this.url).then(response => {
                    this.list = response;
                    this.listLoading = false;
                }).catch(res=>{
                    this.listLoading=false;
                })
            },
        }
    }
</script>